import React from "react";
import UserInfoHeader from "../../Component/UserInfoHeader";
import './index.css';
import DivChecked from "../../Component/DivChecked";
import { Input, DatePicker } from 'antd';
import moment from "moment";
import UserServer from "../../Server/User";
import UserCheck from "../../utils/UserCheck";
import { message } from 'antd';
const { TextArea } = Input;
const success = () => {
    message.success('保存成功', 3);
  };
export default class User extends React.Component{
    
    constructor(props){
        super();

        this.state={
            userName:"",
            birth:"",
            sign:"",

            labels:[],  //系统定义的标签
        }
        UserServer.SelectUserInformation(UserCheck.GetUserID())
        .then(response=>{
            let date=new Date(response.data.userBirthday);
            // console.log(date);
            this.setState({
                userName:response.data.userName,
                birth:moment(date),
                region:response.data.userRegion,
                sign:response.data.userSignature
            })
            // console.log(response);
        });

        //用户自己的标签
        let userLabels=[];
        UserServer.SelectUserDefineLabel(UserCheck.GetUserID())
        .then(response=>{
            response.data.forEach(i => {
                userLabels.push(i.labelId);
            });
        });

        //默认的系统标签
        UserServer.SelectLabel()
        .then(response=>{
            let labels=[];
            let key=0;
            response.data.forEach(i => {
                let hasLabel=false;
                for(let j=0;j<userLabels.length;j++){
                    // console.log(userLabels[j]===i.labelId)
                    // console.log(userLabels[j])
                    // console.log(i.labelId)

                    if(userLabels[j]===i.labelId){
                        labels.push(<DivChecked key={key++} Change={e=>this.UpdateUserInfo(e)} DivActive={true} id={i.labelId} title={i.labelName} display="block" bgColor="#fff" color="#5393EB" bColor="#5393EB"/>)
                        hasLabel=true;
                        break;
                    }
                }
                if(!hasLabel){
                    labels.push(<DivChecked key={key++} Change={e=>this.UpdateUserInfo(e)} DivActive={false} id={i.labelId} title={i.labelName} display="block" bgColor="#fff" color="#5393EB" bColor="#5393EB"/>)
                }
            });
            this.setState({
                labels:labels
            })
        });
    }

    UpdateUserInfo(){
        let selectLabelIDs=[];
        let selectLabel=document.getElementsByClassName("DivChecked_Out DivActive");
        // console.log(selectLabel.childrens);
        for(let i=0;i<selectLabel.length;i++){
            let id=selectLabel[i].id;
            selectLabelIDs.push({labelsId:id});
        }
        let resultLabel=JSON.stringify(selectLabelIDs).toString();
        // console.log(resultLabel);
        UserServer.UpdateUserInformation(this.state.userName,this.state.region,
            this.state.birthStr,this.state.sign,resultLabel,UserCheck.GetUserID())
        .then(response=>{
            // console.log(response);
            success();
        },reject=>{

        });
    }
    birthChange(date, dateString) {
        let dateStr=date._d.toLocaleDateString();
        dateStr=dateStr.replace(/\//g,'-');
        this.setState({
            birth:date,
            birthStr:dateStr
        },()=>{
            this.UpdateUserInfo();
        });
      }
      ChangeName(e){
        this.setState({
            userName:e.target.value
        },()=>{
                this.UpdateUserInfo();
            });
      }
      ChangeArea(e){
        this.setState({
            region:e.target.value
        },()=>{
            this.UpdateUserInfo();
        });
      }
    ChangeSign(e){
        this.setState({
            sign:e.target.value
        },()=>{
            this.UpdateUserInfo();
        });
    }
    render(){
        return(
            <div>
                <div><UserInfoHeader/></div>
                <div className="UserInfo_Down">
                    {/* <hr/> */}
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">派.昵称</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="（只能设置一次）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">生日</span>
                        <div className="Down_Input_Body">
                            <DatePicker style={{ width: '100%' }} value={this.state.birth} 
                            onChange={e=>this.birthChange(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">地区</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" value={this.state.region}  
                            onChange={e=>this.ChangeArea(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Textarea">
                        <span className="Down_Input_Title the_last">派.签名</span>
                        <div className="Down_Input_Body">
                            <TextArea rows={4} style={{resize:"none"}} value={this.state.sign} 
                            onChange={e=>this.ChangeSign(e)}/>
                        </div>
                        <div className="Down_Bottom">
                            {this.state.labels}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}